<template>
	<div>
		<div class="home">
			<h3>给您拜年啦！</h3>
			<el-menu default-active="/home" text-color="gold" background-color="red" active-text-color="white" :router="true">
				<el-menu-item index="/home">主页</el-menu-item>
				<el-menu-item index="/home/detail">商品详情</el-menu-item>
				<el-menu-item index="/home/cart">购物车</el-menu-item>
				<el-menu-item index="/home/order">我的订单</el-menu-item>
				<el-menu-item index="/home/message">个人信息设置</el-menu-item>
				<el-avatar v-if="token!=0">
					<img :src="`${$Imgurl}/showImg/${img}`">
				</el-avatar>
				<el-avatar v-if="token==0">
					adm
				</el-avatar>
				<a href="#" @click="this.show=true">{{nickname}}</a>
				<a href="#" style="margin-left: 150px;line-height: 10px;" @click="toesc()">退出</a>
			</el-menu>
		</div>
		<div class="grrr">
			<router-view></router-view>
		</div>
		<el-dialog title="登录" center v-model="show" width="500px">
			<p>
				账号：<el-input placeholder="请输入账号" type="text" v-model="form.username"></el-input>
			</p>
			<p style="margin-top: 15px;">
				密码：<el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
			</p>
			<span class="dialog-footer" style="display: block; text-align: center;margin-top: 15px;">
				<el-button @click="show = false">取消</el-button>
				<el-button type="primary" @click="tologin()">确定</el-button>
				<el-button type="text" @click="btn()">立即注册</el-button>
			</span>
		</el-dialog>
		<el-dialog title="注册" center v-model="register" width="500px">
			<p>
				账号：<el-input placeholder="请输入账号" type="text" v-model="registerform.account"></el-input>
			</p>
			<p>
				密码：<el-input placeholder="请输入密码" type="password" v-model="registerform.password"></el-input>
			</p>
			<p>
				昵称：<el-input placeholder="请输入账号" type="text" v-model="registerform.nickname"></el-input>
			</p>
			<p>
				电话：<el-input placeholder="请输入联系方式" type="text" v-model="registerform.phone"></el-input>
			</p>
			<span class="dialog-footer" style="display: block; text-align: center;margin-top: 15px;">
				<el-button @click="show = false">取消</el-button>
				<el-button type="primary" @click="toregister()">注册</el-button>
				<el-button type="text" v-if="btnshow==0">立即注册</el-button>
				<el-button type="text" v-if="btnshow==1" @click="btn2()">已有账号，点击登录</el-button>
			</span>
		</el-dialog>
	</div>
</template>


<script>
	//引入拦截器		import {$post,$get} from '../../ajax/index.js'
	import instance from '../../ajax/index.js'
	export default {
		name: 'Home',
		data() {
			return {
				btnshos:0,
				token:0,
				register:false,
				img:'',
				myhead:'',
				nickname: '未登录',
				form: {
					username: '',
					password: '',
					grant_type:'password'  ,//获取token采用密码模式
					client_id:'sobook4'  ,//应用id
					client_secret:'444444'  //密钥
				},
				registerform:{
					account:'',
					password:'',
					nickname:'',
					phone:'',
				},
				show: false
			}
		},
		methods: {
			tologin() {
				let that=this
				let login=this.$qs.stringify(this.form)
				this.axios.post('/oauth/token',login,{
					headers:{'Content-Type':'application/x-www-form-urlencoded'}
				}).then( (res)=>{
					//将请求成功的token存入本地存储中
					localStorage.setItem('token',res.data.access_token)
					instance.get('/api/info/getUser').then( (res)=>{
						that.myhead=res.data.img
						localStorage.setItem('nickname',res.data.nickname)
						localStorage.setItem('img',that.myhead)
						localStorage.setItem('account',res.data.account)
						localStorage.setItem('role',res.data.role)
						this.form.username=''
						this.form.password=''
						this.nickname=res.data.nickname
						// this.img=res.data.img
						this.img=localStorage.getItem('img')
						this.show=false
						this.token=1
						if(res.data.closed!=0){
							this.$message.warning({
								message: "你的账号已冻结请联系管理员解冻",
								offset: 80,
								
							})
							this.token=0
							this.nickname='未登录'
							localStorage.setItem('nickname','')
							localStorage.setItem('account','')
							localStorage.setItem('role','')
							localStorage.setItem('token','')
						}else{
							if(res.data.role==='G'){
								that.$router.push('/admin')
								this.$message.success({
									message: "登录成功",
									offset: 80,
									
								})
								return
							}
							if(res.data.role==='P'){
								that.$router.push('/home')
								this.$message.success({
									message: "登录成功",
									offset: 80,
									
								})
								return
							}
						}
						
					} ).catch( (error)=>{
						console.log(error);
					} )
				} ).catch( (error)=>{
					console.log(error);
				} )
			},
			btn(){
				this.btnshow=1
				this.show=false
				this.register=true
			},
			btn2(){
				this.show=true
				this.register=false
			},
			toregister(){
				this.axios.post('/api/public/addUser',this.registerform,{
					headers:{'Content-Type':'application/json'}
				}).then( (res)=>{
					this.show=false
					this.register=false
				} ).catch( (error)=>{
					console.log(error);
				} )
			},
			toesc(){
				this.token=0
				this.nickname='未登录'
				localStorage.setItem('nickname','')
				localStorage.setItem('account','')
				//role作用：1.确定登录者登陆成功之后跳转到哪个页面2.确定登录者能够访问的页面权限
				localStorage.setItem('role','')
				localStorage.setItem('token','')
			}
		},
	}
</script>

<style scoped>
	.mes {
		top: 100px;
		position: absolute;
	}
	.el-menu-item{
		/* width: 2000px; */
	}
	.el-input {
		margin-left: 10px;
		width: 350px;
		margin-top: 15px;
	}
	.element.style{
		margin-top:1px ;
	}
	.default-active {
		color: red;
	}

	a {
		color: gold;
		text-decoration: none;
		font-size: 20px;
	}

	.home {
		width: 100%;
		display: flex;
		position: fixed;
		z-index: 9999;
		justify-content: space-between;
		background-color: red;
	}

	.el-avatar {
		margin-left: 100px;
		margin-top: 8px;
	}

	.home h3 {
		width: 20%;
		text-indent: 2em;
		line-height: 50px;
		font-size: 25px;
		color: gold;
	}

	.home ul {
		width: 75%;
	}

	.home ul li {
		float: left;
		line-height: 50px;
		width: 12%;
	}

	.grrr {
		width: 100%;
		overflow: hidden;
	}
</style>
